<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./WEB-INF/templates/template.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <!--
        listTutorial.xhtml
        Den här filen ansvarar för att visa upp en lista av alla tutorials på servern
        samt länkar vidare så att tutorial:arna kan editeras.
    -->

    <ui:param name="headerText" value="Saved Tutorials"></ui:param>

    <ui:define name="content">

        <h:form id="form" prependId="false">

            <p:button id="createTutorialButton" value="Create new Tutorial" outcome="/editTutorial.xhtml" />

            <p:dataTable id="tutorialList" value="#{tutorialBean.getTutorials()}" var="tutorial">

                <f:facet name="header">All Tutorials</f:facet>

                <p:column headerText="Title" sortBy="#{tutorial.title}">
                    <h:outputText value="#{tutorial.title}" />
                </p:column>

                <p:column headerText="Description">
                    <h:outputText value="#{tutorial.description}" />
                </p:column>

                <p:column sortBy="#{tutorial.rate}" headerText="Rate">
                    <h:outputText value="#{tutorial.rate}" />
                </p:column>

                <p:column sortBy="#{tutorial.createdBy.name}" headerText="Created By">
                    <h:outputText value="#{tutorial.createdBy.name}" />
                </p:column>

                <p:column sortBy="#{tutorial.createdAt}" headerText="Created At">
                    <h:outputText value="#{tutorial.createdAt.toLocaleString()}" />
                </p:column>

                <p:column headerText="Options">
                    <p:button image="ui-icon ui-icon-pencil" title="Edit" outcome="/editTutorial.xhtml" >
                        <f:param name="tutorial" value="#{tutorial.id}"/>
                    </p:button>
                    <p:commandButton update="form" image="ui-icon ui-icon-close" title="Delete" actionListener="#{editTutorialBB.deleteTutorial(tutorial.id)}">
                        <!--                        <f:ajax event="click" render="tutorialList" />-->
                        <p:ajax event="click" update="tutorialList" />
                    </p:commandButton>

                </p:column>

            </p:dataTable>
        </h:form>


    </ui:define>
</ui:composition>